<template>
  <form action="">
    <slot></slot>
  </form>
</template>

<script>
export default {
  name: "vForm",
  provide() {
    form: this;
  },
  props: {
    mode: {
      type: Object,
    },
    rules: {
      type: Object,
    },
  },
  data() {
    return {
      fields: [],
    };
  },
  // 由于渲染顺序，因此只能在created之前进行子组件派发事件的监听，如果使用mounted讲接收不到，
  created() {
    this.$on("on-form-item-add", (field) => {
      if (field) this.fields.push(field);
    });
    this.$on("on-form-item-remove", (field) => {
      if (field.prop) {
        this.fields.splice(this.fields.indexOf(field), 1);
      }
    });
  },
};
</script>

<style>
</style>